<template>
    <view style="height: 100%">
        <!-- <custom-nav title="单笔折扣详情" customTitleStyle="color:#18181A;">
            <view slot="nav-bg" class="nav__bg" :style="'height: ' + navHeight + 'px;'">
                <image class="img" mode="widthFix" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png"></image>
            </view>
        </custom-nav> -->
        <!-- <image class="nav__bg" style="height: 335rpx;" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/home_bg.png"></image> -->

        <view v-if="activityDetail.userStatus == 1">
            <view v-if="activityDetail.status == 2" class="pay-award">
                <view class="demarcation">
                    <image class="img" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/hd_tit.png"></image>
                </view>
                <view class="hd_box">
                    <!-- 活动 -->
                    <view class="activity-container">
                        <view class="title">{{ activityDetail.name }}</view>
                        <view class="line-container">
                            <view class="left-circle"></view>
                            <view class="dotted-line"></view>
                            <view class="right-circle"></view>
                        </view>
                        <view class="head-list">
                            <view class="head-list__item flex-row-start">
                                <view class="head-list__left flex-row-start">
                                    <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_date.png"></image>
                                    <view class="item-title">活动期限</view>
                                </view>
                                <view class="head-list__right">
                                    <text>{{ activityDetail.startTime }}</text>
                                    <text v-if="activityDetail.alwaysValidStatus == 1">~{{ activityDetail.endTime }}</text>
                                    <text v-if="activityDetail.alwaysValidStatus == 2">~长期有效</text>
                                </view>
                            </view>
                            <view class="head-list__item flex-row-start">
                                <view class="head-list__left flex-row-start">
                                    <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_time.png"></image>
                                    <view class="item-title">活动时间段</view>
                                </view>
                                <view class="head-list__right" v-if="activityDetail.limitTimeStatus == 1">全天</view>
                                <view class="head-list__right" v-if="activityDetail.limitTimeStatus == 2">{{ activityDetail.limitTime }}</view>
                            </view>
                            <view class="head-list__item flex-row-start">
                                <view class="head-list__left flex-row-start">
                                    <image class="item-icon" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/icon_user.png"></image>
                                    <view class="item-title">适用用户</view>
                                </view>
                                <view class="head-list__right" v-if="activityDetail.applyUserStatus == 1">所有会员</view>
                                <view class="head-list__right" v-if="activityDetail.applyUserStatus == 2">所有个人会员</view>
                                <view class="head-list__right" v-if="activityDetail.applyUserStatus == 3">指定个人会员</view>
                                <view class="head-list__right" v-if="activityDetail.applyUserStatus == 4">所有车队会员</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="pay-award__box">
                    <view class="box-head flex-row-start">
                        <view class="box-head__title">奖励方式</view>
                        <view class="box-head__desc">奖励数量有限，送完即止</view>
                    </view>

                    <view class="card_wrap flex-row-start flex_wrap">
                        <view class="card_item flex-column-start" v-if="jlfsDetail.fwf" v-for="(item, index) in jlfsDetail.fwf" :key="index">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/bg-2.png"></image>

                            <view class="desc">享受免服务费</view>

                            <view class="title">{{ item.serviceFeeDiscount }}折</view>

                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/frame.png"></image>
                                <view>单笔消费满{{ item.singleConsumeAmount }}元</view>
                            </view>

                            <view class="zhezhao" v-if="item.completeUnitAwardCount == 0">
                                <view class="zhezhao_container">
                                    <text v-if="item.limitCountUnit == 1">今日</text>
                                    <text v-if="item.limitCountUnit == 2">本周</text>
                                    <text v-if="item.limitCountUnit == 3">本月</text>
                                    <text v-if="item.limitCountUnit == 4">活动期间</text>
                                    已送完
                                </view>
                            </view>
                        </view>
                        <view class="card_item flex-column-start" v-if="jlfsDetail.jf" v-for="(item, index) in jlfsDetail.jf" :key="index">
                            <image class="bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/bg-2.png"></image>

                            <view class="desc">送积分</view>

                            <view class="title">{{ item.giveIntegral }}分</view>

                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/homeSub/images/marketingImg/frame.png"></image>
                                <view>单笔消费满{{ item.singleConsumeAmount }}元</view>
                            </view>

                            <view class="zhezhao" v-if="item.completeUnitAwardCount == 0">
                                <view class="zhezhao_container">
                                    <text v-if="item.limitCountUnit == 1">今日</text>
                                    <text v-if="item.limitCountUnit == 2">本周</text>
                                    <text v-if="item.limitCountUnit == 3">本月</text>
                                    <text v-if="item.limitCountUnit == 4">活动期间</text>
                                    已送完
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="pay-award__box">
                    <view class="box-head flex-row-start">
                        <view class="box-head__title">活动说明</view>
                    </view>

                    <view class="box-describe">
                        {{ activityDetail.explainText }}
                    </view>
                </view>
            </view>

            <view v-if="activityDetail.status == 1">
                <Upgrading imgType="s1" text="活动开始时间 " :textTime="activityDetail.startTime" text2="敬请期待!"></Upgrading>
            </view>

            <view v-if="activityDetail.status == 3">
                <Upgrading imgType="s3" text="哎呀，活动结束了~"></Upgrading>
            </view>

            <view v-if="activityDetail.status == 4">
                <Upgrading imgType="s3" text="哎呀，活动已停止~"></Upgrading>
            </view>
        </view>

        <view v-if="activityDetail.userStatus == 2">
            <Upgrading imgType="u0" text="抱歉，您不是受邀用户，暂时无法参加此活动哦!"></Upgrading>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';

// import customNav from '../../../../components/custom-nav/index';
import Upgrading from '../../../../components/upgrading/upgrading.vue';
// homeSub/pages/discount/singleMoney/singleMoney.ts
const app = getApp();
import { getSingleDiscountDetail } from '../../../../api/marketing/stationListApi';
export default{
    components: {
        // customNav,
        Upgrading
    },
    data() {
        return {
            HD: '',
            activityDetail: {
                userStatus: 0,
                status: 0,
                name: '',
                startTime: '',
                alwaysValidStatus: 0,
                endTime: '',
                limitTimeStatus: 0,
                limitTime: '',
                applyUserStatus: 0,
                explainText: ''
            },
            jlfsDetail: {
                fwf: '',
                jf: ''
            },
            navHeight: app.globalData.statusBarHeight + app.globalData.navBarHeight
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options: any) {
        console.log(options);
        this.setData({
            HD: options.HD
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        console.log(this.HD, 'sssssssssssssss');
        this.getHdDetail();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        //获取站点累计消费活动详情
        getHdDetail() {
            getSingleDiscountDetail({
                activityId: this.HD,
                userId: uni.getStorageSync('memberId')
            }).then((res: any) => {
                console.log(res.data, 'lllllllll');
                if (res.code == 200) {
                    this.setData({
                        activityDetail: res.data.activityDetail,
                        jlfsDetail: {
                            fwf: res.data.discountDetailList,
                            jf: res.data.integralDetailList
                        }
                    });
                    console.log(this.activityDetail, 'aaaaaaaaaa');
                    console.log(this.jlfsDetail, 'jjjjjj');
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
@import '../../../../commin/flex.less';

page {
    background-color: #eff3f9;
}

.nav__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 60px;
    z-index: -1;
    overflow: hidden;
    .img {
        width: 100%;
        height: 335rpx;
    }
}

.pay-award {
    .head-list {
        margin-top: 20rpx;

        &__left {
            width: 200rpx;
        }

        &__right {
            font-size: 28rpx;
            color: #303133;
        }

        &__item {
            margin-bottom: 38rpx;
            align-items: flex-start !important;

            .item-icon {
                width: 28rpx;
                height: 28rpx;
                margin-right: 13rpx;
            }

            .item-title {
                font-size: 28rpx;
                color: #606266;
                width: 200rpx;
            }
        }
    }

    &__box {
        background: linear-gradient(0deg, #ffffff, #f4f6f8);
        border: 2rpx solid #ffffff;
        box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
        border-radius: 16rpx;
        margin: 0 24rpx;
        padding: 0 32rpx;
        margin-bottom: 16rpx;

        .box-head {
            height: 100rpx;
            border-bottom: 1px solid #dcdfe6;

            &__title {
                font-size: 30rpx;
                font-weight: bold;
                color: #303133;
                margin-right: 33rpx;
            }

            &__desc {
                font-size: 26rpx;
                color: #909399;
            }
        }

        .card_wrap {
            padding-top: 32rpx;

            .card_item {
                position: relative;
                width: 202rpx;
                height: 192rpx;
                z-index: 1;
                margin-right: 15rpx;
                margin-bottom: 24rpx;
                line-height: 1;
                padding-top: 30rpx;
                box-sizing: border-box;

                /* &:nth-child(3),&:nth-child(6),&:nth-child(9) {*/
                /*     margin-right: 0;*/
                /* }*/
                &:nth-child(3n) {
                    margin-right: 0;
                }

                .desc {
                    font-size: 22rpx;
                    color: #a27344;
                    margin-bottom: 16rpx;
                }

                .bg {
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: -1;
                }

                .title {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #fc724c;
                    margin-bottom: 20rpx;
                }

                .btn {
                    position: relative;
                    width: 182rpx;
                    height: 65rpx;
                    font-size: 22rpx;
                    font-weight: 500;
                    color: #a14b20;

                    .btn_frame {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: -1;
                    }
                }
            }
        }

        .link-img {
            width: 695rpx;
            height: 25rpx;
            margin: 32rpx -32rpx;
        }

        .box-discounts {
            .hig {
                font-weight: bold;
                color: #ae865c;
            }

            &__head {
                position: relative;
                height: 101rpx;
                z-index: 1;
                padding: 0 32rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #606266;

                .head-bg {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    z-index: -1;
                    left: 0;
                    top: 0;
                }
            }

            &__tickets {
                /* height: 242rpx;*/
                width: 630rpx;
                margin: 0 auto;
                background: #fdf1e5;
                /* opacity: 0.6;*/
                border-radius: 10rpx;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                margin-top: -24rpx;
                padding: 60rpx 46rpx 20rpx;
                box-sizing: border-box;

                .tickets-item {
                    width: 137rpx;
                    height: 142rpx;
                    position: relative;
                    z-index: 1;
                    line-height: 1;
                    margin-right: 60rpx;
                    margin-bottom: 33rpx;

                    &:nth-child(3n) {
                        margin-right: 0;
                    }

                    &__bg {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                    }

                    &__title {
                        font-size: 18rpx;
                        color: #a26d35;
                        padding-top: 8rpx;
                        margin-bottom: 20rpx;
                    }

                    &__num {
                        text {
                            font-size: 22rpx;
                        }

                        font-weight: bold;
                        color: #f0703e;
                        font-size: 36rpx;
                        margin-bottom: 25rpx;
                    }

                    &__desc {
                        font-size: 22rpx;
                        color: #fad9b1;
                    }
                }
            }
        }

        .box-describe {
            padding: 39rpx 0;
            font-size: 26rpx;
            color: #303133;
            word-wrap: break-word;
        }
    }
}

.demarcation {
    margin: 0 auto;
    height: 70rpx;
    margin-top: 20rpx;
    .img {
        width: 99%;
        height: 100%;
        margin-left: 8rpx;
    }
}

.hd_box {
    border: 2rpx solid #ffffff;
    box-shadow: 4rpx 7rpx 20rpx 0px rgba(166, 171, 179, 0.24);
    margin: 0 24rpx 20rpx;
    border-radius: 0 0 16rpx 16rpx;

    .activity-container {
        background: #fcfbfc;
        border: 2rpx solid #fcfbfc;
        border-radius: 0 0 16rpx 16rpx;
        padding: 0 32rpx;

        .title {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #303133;
            margin: 0 auto;
        }

        .line-container {
            display: flex;
            .dotted-line {
                width: 100%;
                border-bottom: 0.5rpx solid #dcdfe6;
                margin: 20rpx auto;
            }

            .left-circle {
                width: 18rpx;
                height: 36rpx;
                border-radius: 0 18rpx 18rpx 0;
                line-height: 36rpx;
                background-color: #f5f7fa;
                position: absolute;
                left: 25rpx;
            }

            .right-circle {
                width: 18rpx;
                height: 36rpx;
                border-radius: 18rpx 0 0 18rpx;
                line-height: 36rpx;
                background-color: #f5f7fa;
                position: absolute;
                right: 25rpx;
            }
        }
    }
}

/* 奖励方式遮罩*/
.zhezhao {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(23, 20, 16, 0.7);
    border-radius: 16rpx;
    .zhezhao_container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #f5f7fa;
    }
}
</style>
